<template>
  <view class="container">
    <camera class="camera" :device-position="devicePosition" frame-size="high" flash="off" @error="onCameraError">
      <view class="Cameratitle_Title">
        <view class="Cameratitle_Title_pop">
          <view @click="onClickicon">
            <van-icon name="arrow-left" color="#fff" size="20px" />
          </view>
          <view class="photo" @click="handleSwitchCamera">
            切换
          </view>
        </view>
      </view>
      
      <view class="CameraImage">
        <image src="http://qichong-1256206693-1256206693.cos.ap-nanjing.myqcloud.com/upload/20210703/5cf27943f5195291cdfe21c142490aa3.png" mode="widthFix" class="maxImage"></image>
        <image src="http://qichong-1256206693-1256206693.cos.ap-nanjing.myqcloud.com/upload/20210703/0ffdd0b7fee72a5fc3201fb943ff841a.png" mode="widthFix" class="minImage"></image>
      </view>
      <view class="Cameratitle_box">
        <view class="Cameratitle">
          <image src="http://qichong-1256206693-1256206693.cos.ap-nanjing.myqcloud.com/upload/20210703/37c830a2376d78bf84e53a5315427445.png" mode="widthFix"></image>
        </view>
      </view>
	  <canvas class="pose-canvas" canvas-id="pose">
	    
	  </canvas>
    </camera>
	

    <van-popup :show="Scanshow" round position="bottom" custom-style="height: 50%" @close="onScanClose">
      <view v-if="error" style="text-align: center;margin-top: 50px;">
		
        {{error}}
		<view class="Popup_image Popup_image1">
		  <image src="/static/images/mine/gerenno.png" mode="widthFix"></image>
		</view>
      </view>
	  <view class="Popup_image" v-if="!error">
        <image :src="ScanList.imageUrl" mode="aspectFill"></image>
      </view>

      <view class="Popup_title" v-if="!error">
        <h1>{{ScanList.name}}</h1>
        <text>{{ScanList.description}}</text>
      </view>
    </van-popup>
  </view>
</template>

<script>
  const {
    appWidth,
    appHeight
  } = getApp().globalData;
  export default {
    data() {
      return {
        devicePosition: 'back',
        windowHeightType: 0,
        predicting: false,
        lock: false,
        count: 0,
        Scanshow: false,
        ScanList: {},
		error:false
      };
    },
    onLoad() {
      // 获取当前系统的信息
      const sysInfo = uni.getSystemInfoSync()
      this.windowHeightType = sysInfo.windowHeight
      // console.log(this.windowHeightType)
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {
      const context = uni.createCameraContext();
      let that = this;
      const listener = context.onCameraFrame(frame => {
		if(!that.predicting){
			that.count++;
		}
        
        if (that.count === 30 && !that.lock && !that.predicting) {
          that.canvasImg(frame);
        }
      });
      listener.start();
    },
    methods: {
      canvasImg(frame) {
        const that = this;
        that.predicting = true;
		that.count = 0;
        var data = new Uint8Array(frame.data);
        var clamped = new Uint8ClampedArray(data);

        uni.canvasPutImageData({
          canvasId: 'pose',
          x: 0,
          y: 0,
          width: frame.width,
          height: frame.height,
          data: clamped,
          success(res) {
            console.log("canvasPutImageData:");
            uni.canvasToTempFilePath({
              canvasId: 'pose',
              x: 0,
              y: 0,
              width: frame.width,
              height: frame.height,
              fileType: 'jpg',
              destWidth: frame.width,
              destHeight: frame.height,
              // 精度修改
              quality: 0.8,
              success(temp) {
                // uni.saveImageToPhotosAlbum({
                //   filePath: temp.tempFilePath,
                //   success: function() {
                //     console.log('save success');
                //   }
                // });
                that.uploadPhoto(temp.tempFilePath);
              },
              fail(err) {
                that.predicting = false;
              }
            })
          },
          fail(err) {
            that.predicting = false;
          }
        });
      },
      handleSwitchCamera() {
        this.devicePosition = this.devicePosition === 'front' ? 'back' : 'front';
        this.Scanshow = false;
        this.ScanList = {};
        this.predicting = false;
        this.lock = false;
        this.error = false;
        this.count = 0;
      },
      onCameraError(e) {
        // console.log('onCameraError>>', e);
      },
      onClickicon() {
        uni.navigateBack()
      },
      onClickphoto() {
        let that = this;
        uni.chooseImage({
          count: 1, //默认9
          sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
          sourceType: ['album'], //从相册选择、摄像头
          success: function(res) {
            that.uploadPhoto(res.tempFilePaths[0]);
          }
        });
      },
      uploadPhoto(img) {
        let self = this;
        self.$util.uploadImage('qichong-recognition/ai/animal', img, function(res) {
		  res = JSON.parse(res);
          self.ScanList = res.data;
		  self.Scanshow = true;
          self.predicting = false;
          self.lock = true;
        }, function(err) {
			// console.log("error: "+err);
          self.error = "没有找到相关宠物信息";
          self.Scanshow = true;
          self.predicting = false;
          self.lock = true;
        });
      },
      onScanClose() {
        this.Scanshow = false;
		this.ScanList = {};
		this.predicting = false;
		this.lock = false;
		this.error = false;
		this.count = 0;
      }
    }
  }
</script>

<style lang="scss">
  .container {
    position: relative;

    .CameraImage {
      height: 100%;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;

      image {
        position: absolute;
      }

      .maxImage {
        width: 524rpx;
        height: 524rpx;
        animation: outside 6s linear infinite;
      }

      .minImage {
        width: 454rpx;
        height: 454rpx;
        animation: outsideone 8s linear infinite;
      }
    }

    .Cameratitle_box {
      position: absolute;
      bottom: 80rpx;
      padding: 0 25rpx;

      .Cameratitle {
        width: 702rpx;
        height: 183rpx;
        background-color: rgba(0, 0, 0, 0.2);
        border-radius: 20rpx;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }

    .Cameratitle_Title {
      width: 100%;
      position: absolute;
      z-index: 999;
      top: 150rpx;

      .Cameratitle_Title_pop {
        display: flex;
        justify-content: space-between;
        padding: 0px 20px;

        .photo {
          border: 1px solid #fff;
          padding: 2px 15px;
          line-height: 20px;
          border-radius: 20px;
          font-size: 24rpx;
          color: #fff;
        }
      }
    }

  }

  @keyframes outside {
    from {
      transform: rotate(0deg)
    }

    to {
      transform: rotate(360deg);
    }
  }

  @keyframes outsideone {
    from {
      transform: rotate(0deg)
    }

    to {
      transform: rotate(-360deg);
    }
  }

  .camera {
    width: 100%;
    height: 100vh;
  }

  .pose-canvas {
    width: 100%;
	height: 100vh;
	
  }

  // .pose-canvas {
  // 	position: absolute;
  // 	top: -999rpx;
  // 	left: -999rpx;
  // }
	.Popup_image1 {
		padding-top: 60rpx !important;
	}
  .Popup_image {
    // width: 300rpx;
    height:300rpx;
    padding-top: 100rpx;
    padding-bottom: 20rpx;
    display: flex;
    justify-content: center;
    align-items: center;

    image {
      width: 300rpx;
      height: 100%;
    }
  }

  .Popup_title {
    padding: 40rpx 40rpx 0;

    h1 {
      font-size: 40rpx;
      font-weight: bold;
      margin-bottom: 20rpx;
    }

    text {
      font-size: 28rpx;
      color: rgba(61, 61, 61, 0.6);
    }
  }
</style>
